<template>
  <div class="slider-box">
    <div class="show-img">
      <img v-if="sliderArr" :src="sliderArr[active]" alt="" />
    </div>
    <div class="qkView">
      <div class="slt_prev prev" @click="prev">
        <span class="iconfont icon-ico_leftarrow"></span>
      </div>
      <div class="slt_disc">
        <ul ref="ulMove">
          <li
            class="static-s"
            :class="{ active: active == index }"
            v-for="(item, index) in sliderArr"
            :key="index"
            @click="changeImg(index)"
          >
            <img class="view-min_img"  :src="item" />
          </li>
        </ul>
      </div>
      <div class="slt_next next" @click="next">
        <span class="iconfont icon-youjiantou"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch, ref } from "vue";

export default defineComponent({
  props:{
    sliderArr: Array
  },
  setup(props) {
    const data = reactive({
      active: 0
    });

    let ulMove = ref(null);

    watch(data.active, (newValue, oldValue) => {
      let width = -124;
      if (newValue < 3) {
        ulMove.value.style.marginLeft = 0;
      }

      if (newValue > props.sliderArr.length - 4) {
        ulMove.value.style.marginLeft = width * (props.sliderArr.length - 6) + "px";
      }

      if (newValue < 3 || newValue > props.sliderArr.length - 4) return;
      ulMove.value.style.marginLeft = width * (newValue - 2) + "px";
    });

    const changeImg = (index) => {
      data.active = index;
    };

    const prev = () => {
      if (data.active == 0) {
        data.active = props.sliderArr.length - 1;
        return;
      }

      --data.active;
    };
    const next = () => {
      if (data.active == props.sliderArr.length - 1) {
        data.active = 0;
        return;
      }
      ++data.active;
    };

    return {

      ulMove,
      prev,
      next,
      changeImg,
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" >
.slider-box {
  width: 800px;
  .show-img {
    display: block;
    width: auto;
    height: 450px;
    margin: 0 auto;
    position: relative;
    img {
      width: 100%;
      height: 450px;
    }
    .show-block_info {
      position: absolute;
      cursor: pointer;
      bottom: 0;
      left: 0;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      color: #efefef;
      padding: 0 10px;
      background: rgba(0, 0, 0, 0.6);
    }
  }
  .qkView {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 90px;
    margin-top: 10px;
    background: #ffffff;
    .slt_prev {
      float: left;
      width: 24px;
      height: 90px;
      margin-right: 7px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      background-color: #4a4a4a;
      &:hover {
        opacity: 0.5;
      }
    }
    .slt_disc {
      float: left;
      width: 740px;
      height: 90px;
      overflow: hidden;
      ul {
        width: 1240px;
        display: flex;
        float: left;
        transition: all 0.3s;
        li {
          &.active {
            opacity: 1;
          }
          &:hover {
            opacity: 1;
          }
          width: 116px;
          height: 90px;
          margin-right: 8px;
          cursor: pointer;
          background: #ffffff;
          opacity: 0.5;
          .view-min_img {
            width: 116px;
            height: 90px;
          }
        }
      }
    }
    .slt_next {
      float: right;
      width: 24px;
      cursor: pointer;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background-color: #4a4a4a;
      &:hover {
        opacity: 0.5;
      }
    }
  }
}
</style>